<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>值子传父</title>
    <script src="../../js/common/vue/vue.js"></script>
</head>
<body>
<div id="app">
<!--   将子组件中发射方法与父组件的接收方法做一个绑定 也就是建立一个对应关系，一一对应， -->
<cpn @manner="soncliek"></cpn>
</div>
<template id="temp">
    <div>
       <button v-for="item in array "
               @click="btn(item)"
       >
            {{item.name}}
       </button>
    </div>
</template>
<script>
    const cpn ={
        template:"#temp",
        data(){
            return{
                array:[
                    {id:1,name:'q'},
                    {id:2,name:'w'},
                    {id:3,name:'e'},
                    {id:4,name:'r'}
                ]
            }
        },
        methods:{
            btn(item){
                /*！发射事件 可以理解为定义的回调函数,*/
                //语法 this,$emit('方法名',参数);
                this.$emit('manner',item);
            }
        }
    };
    new Vue({
        el:'#app',
        data:{
            messge:'a'
        },
        components:{
            cpn
        },
        methods: {
            soncliek(itme){
                alert('父组件接收子组件的参数：'+itme.name);
            }
        }
    })
</script>
</body>
</html>